/* 全局选择器，应用于所有元素及其伪元素 */
body * {
  box-sizing: border-box; /* 设置盒模型为 border-box，元素的 padding 和 border 包含在宽度和高度内 */
  flex-shrink: 0; /* 防止 flex 项目缩小 */
}

/* 图片元素设置为块级元素，避免默认的 inline 行为带来的布局问题 */
img {
  display: block;
}

/* body 元素的样式 */
body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei; /* 设置字体族，优先使用 PingFangSC-Regular，其次是 Roboto 等 */
  padding: 0 20px; /* 左右内边距为 20px */
  background-color: #F5F7F9; /* 背景颜色为浅灰色 */
  padding-top: 60px; /* 顶部内边距为 60px */
  margin: 0; /* 外边距为 0 */
}

/* input 元素的样式 */
input {
  background-color: transparent; /* 背景透明 */
  border: 0; /* 无边框 */
}

/* button 元素的样式 */
button {
  margin: 0; /* 外边距为 0 */
  padding: 0; /* 内边距为 0 */
  border: 1px solid transparent; /* 边框为透明 */
  outline: none; /* 去除默认的轮廓线 */
  background-color: transparent; /* 背景透明 */
}

/* 按钮激活状态的样式 */
button:active {
  opacity: 0.6; /* 激活时透明度为 0.6 */
}

/* 特定类名的元素激活状态样式 */
.van-nav-bar__left:active,
.van-nav-bar__right:active {
  opacity: 1; /* 激活时透明度为 1，即不透明 */
}

/* 所有类名包含 'van-' 的元素的伪元素样式 */
[class*='van-']::after {
  border-bottom: 0; /* 去除底部边框 */
}

/* 弹性盒子布局，列方向 */
.flex-col {
  display: flex;
  flex-direction: column;
}

/* 弹性盒子布局，行方向 */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* 弹性盒子布局，主轴对齐方式：左对齐 */
.justify-start {
  display: flex;
  justify-content: flex-start;
}

/* 弹性盒子布局，主轴对齐方式：居中对齐 */
.justify-center {
  display: flex;
  justify-content: center;
}

/* 弹性盒子布局，主轴对齐方式：右对齐 */
.justify-end {
  display: flex;
  justify-content: flex-end;
}

/* 弹性盒子布局，主轴对齐方式：均匀分布，项目间距相等 */
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

/* 弹性盒子布局，主轴对齐方式：均匀分布，项目周围间距相等 */
.justify-around {
  display: flex;
  justify-content: space-around;
}

/* 弹性盒子布局，主轴对齐方式：两端对齐，项目之间间距相等 */
.justify-between {
  display: flex;
  justify-content: space-between;
}

/* 弹性盒子布局，交叉轴对齐方式：顶部对齐 */
.align-start {
  display: flex;
  align-items: flex-start;
}

/* 弹性盒子布局，交叉轴对齐方式：居中对齐 */
.align-center {
  display: flex;
  align-items: center;
}

/* 弹性盒子布局，交叉轴对齐方式：底部对齐 */
.align-end {
  display: flex;
  align-items: flex-end;
}

/* 根元素的自定义属性 */
:root {
  --el-color-primary: #32C5FF; /* 定义主色调为浅蓝色 */
}